<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
export default {
  components: {
    Draggable: async () =>
      Vue.extend(await Vue.prototype.$vFN.Components.Base.Draggable()),
  },
  props: {
    // 使用者window实例 必定义
    appWindow: {
      type: Object,
      default: null,
    },
    // 接口列表
    apiConfig: {
      type: Object,
      default: {
        // 素材配置
        fileConfig: {
          url: "mall-site-portal/album-info/getFileConfig",
        },
        // 素材创建
        createSubmit: {
          url: "mall-site-portal/album-info/create",
        },
        // 分组列表
        albumList: {
          url: "mall-site-portal/album/listAll",
        },
        // 分组添加
        albumAdd: {
          url: "mall-site-portal/album/create",
        },
        // 分组删除
        albumDel: {
          url: "mall-site-portal/album/delete",
        },
        // 分组编辑
        albumEdit: {
          url: "mall-site-portal/album/update",
        },
        // 数据列表
        dataList: {
          url: "mall-site-portal/album-info/list",
        },
        // 数据删除
        dataDel: {
          url: "mall-site-portal/album-info/delete",
        },
        // 数据修改
        dataEdit: {
          url: "mall-site-portal/album-info/update",
        },
        // 数据同步
        dataSync: {
          url: "mall-site-portal/album-info/materialUpload",
        },
      },
    },
    value: {
      type: Array,
      default() {
        return [];
      },
    },

    mode: {
      type: String,
      default() {
        return "";
      },
    },

    // 最大上传数量
    count: {
      type: Number,
      default: -1,
    },

    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {},
  data() {
    return {
      // 选择图片

      dragging: null,
    };
  },
  methods: {
    // 删除选择
    delSelectData(index_) {
      if (this.disabled) {
        return;
      }
      this.value.splice(index_, 1);
      this.updateValue(this.value);
    },

    openBox() {
      if (this.disabled) {
        return;
      }
      this.$vFN.Directives.SelectResourcesImage({
        appWindow: this.appWindow,
        apiConfig: this.apiConfig,
        mode: this.mode,
        count: this.count < 0 ? this.count : this.count - this.value.length,
        onSuccess: (res) => {
          let _selectValue = this.value;
          res.data.map((item) => {
            _selectValue.push(item);
          });
          this.$set(this, "selectValue", _selectValue);
          this.updateValue(_selectValue);
        },
      });
    },

    updateValue(v_) {
      this.$emit("updata:input", v_);
    },
  },
  watch: {},
  mounted() {},
  beforeCreate() {},
};
</script>